<template>
    <div class="layout-container">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <div class="logo-container">
          <el-icon class="logo-icon" color="#1890ff" :size="28"><Shop /></el-icon>
          <h1 class="logo-text">电商管理</h1>
        </div>
        
        <el-menu
          :default-active="activeMenu"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#1890ff"
          router
        >
          <el-menu-item index="/dashboard">
            <el-icon><Monitor /></el-icon>
            <span>工作台</span>
          </el-menu-item>
          
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Document /></el-icon>
              <span>内容管理</span>
            </template>
            <el-menu-item index="/content/advertisement">广告位管理</el-menu-item>
            <el-menu-item index="/content/list">内容列表</el-menu-item>
            <el-menu-item index="/content/category">分类管理</el-menu-item>
          </el-sub-menu>
          
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Goods /></el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/product">商品列表</el-menu-item>
            <el-menu-item index="/product/create">新建商品</el-menu-item>
            <el-menu-item index="/product/category">商品分组</el-menu-item>
            <el-menu-item index="/product/brand">品牌管理</el-menu-item>
            <el-menu-item index="/product/tag">商品标签</el-menu-item>
            <el-menu-item index="/product/attribute">商品属性</el-menu-item>
          </el-sub-menu>
          
          <el-sub-menu index="3">
            <template #title>
              <el-icon><List /></el-icon>
              <span>订单管理</span>
            </template>
            <el-menu-item index="/orders">订单管理</el-menu-item>
            <el-menu-item index="/orders/after-sale">售后服务</el-menu-item>
          </el-sub-menu>
          
          <el-sub-menu index="4">
            <template #title>
              <el-icon><User /></el-icon>
              <span>客户管理</span>
            </template>
            <el-menu-item index="/customer">客户列表</el-menu-item>
            <el-menu-item index="/customer/groups">客户分组</el-menu-item>
            <el-menu-item index="/customer/member-settings">会员设置</el-menu-item>
          </el-sub-menu>
          
          <el-sub-menu index="5">
            <template #title>
              <el-icon><PieChart /></el-icon>
              <span>营销活动</span>
            </template>
            <el-menu-item index="/marketing/coupon">优惠券管理</el-menu-item>
            <el-menu-item index="/marketing/promotion">促销活动</el-menu-item>
          </el-sub-menu>
          
          <el-sub-menu index="6">
            <template #title>
              <el-icon><DataLine /></el-icon>
              <span>数据报表</span>
            </template>
            <el-menu-item index="/statistics/sales">销售统计</el-menu-item>
            <el-menu-item index="/statistics/users">用户分析</el-menu-item>
          </el-sub-menu>
          
          <el-sub-menu index="7">
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/system/users">管理员</el-menu-item>
            <el-menu-item index="/system/roles">角色权限</el-menu-item>
            <el-menu-item index="/system/role">角色管理</el-menu-item>
            <el-menu-item index="/system/user">账号管理</el-menu-item>
            <el-menu-item index="/system/settings">系统设置</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      
      <!-- 主内容区 -->
      <div class="main-content">
        <!-- 顶部导航 -->
        <div class="header">
          <div class="header-left">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>{{ pageTitle }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          
          <div class="header-right">
            <el-input
              placeholder="输入搜索关键内容"
              prefix-icon="Search"
              class="search-input"
            />
            
            <div class="header-icons">
              <el-badge :value="2" class="notification-badge">
                <el-icon size="22"><Bell /></el-icon>
              </el-badge>
              
              <el-dropdown>
                <span class="user-info">
                  <el-avatar :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                  <span class="username">admin</span>
                  <el-icon><ArrowDown /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item>修改密码</el-dropdown-item>
                    <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="content">
          <slot></slot>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { useUserStore } from '../store/user';
  import { ElMessageBox } from 'element-plus';
  import {
    Shop, Monitor, Document, Goods, List, User, PieChart, DataLine, 
    Setting, Bell, ArrowDown, Search
  } from '@element-plus/icons-vue';
  
  const router = useRouter();
  const route = useRoute();
  const userStore = useUserStore();
  
  // 当前激活的菜单
  const activeMenu = computed(() => {
    return route.path;
  });
  
  // 页面标题
  const pageTitle = computed(() => {
    return route.meta.title || '';
  });
  
  // 退出登录
  const handleLogout = () => {
    ElMessageBox.confirm('确定要退出登录吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      userStore.logoutAction();
      router.push('/login');
    }).catch(() => {
      // 取消登出
    });
  };
  </script>
  
  <style scoped>
  .layout-container {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
  }
  
  /* 侧边栏样式 */
  .sidebar {
    width: 220px;
    height: 100%;
    background-color: #001529;
    overflow-y: auto;
    flex-shrink: 0;
  }
  
  .logo-container {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 0 16px;
  }
  
  .logo-icon {
    margin-right: 8px;
  }
  
  .logo-text {
    margin: 0;
    font-size: 18px;
    color: #fff;
  }
  
  /* 主内容区样式 */
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  /* 头部样式 */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    padding: 0 24px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  }
  
  .header-right {
    display: flex;
    align-items: center;
  }
  
  .search-input {
    width: 240px;
    margin-right: 24px;
  }
  
  .header-icons {
    display: flex;
    align-items: center;
  }
  
  .notification-badge {
    margin-right: 24px;
    cursor: pointer;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  
  .username {
    margin: 0 8px;
  }
  
  /* 内容区域样式 */
  .content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    background-color: #f0f2f5;
  }
  </style>